<template>
	<div>
		<div class="container">
			<h2 class="text-center py-2">{{ title }}</h2>

			<div class="plan-info">
				<a-row :gutter="20">
					<a-col :span="8">计划名称：{{ planInfo.name }}</a-col>
					<a-col :span="8">计划时间：{{ create_time }}</a-col>
				</a-row>
			</div>

			<div style="margin-bottom: 12px;">
				<a-button @click="handleExport">导出数据</a-button>
			</div>
			<a-table v-if="!loading" :columns="columns" :scroll="tableScroll" :pagination="false" :data-source="summarySource" :loading="loading">
				<template #headerCell="{ column }">
					<template v-if="column.key === 'qty'">
						<a-tooltip>
							<template #title>{{ column.info }}</template>
							{{ column.title }}
						</a-tooltip>
					</template>
				</template>
			</a-table>

			<div class="text-center mt-4">
				<a-button @click="closeTab('/plan')">
					<close-outlined />关闭
				</a-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="jsx">
import { inject, onMounted, ref, computed } from "vue";
import { CloseOutlined } from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
const route = useRoute();

import { post } from "../utils";
import { exportData } from "../utils/exportData";

const loading = ref(false);

const tableScroll = computed(() => ({
	x: document.documentElement.clientWidth - 680,
	y: document.documentElement.clientHeight - 400
}));

const summaryData = ref({
	plan: {
		children: []
	}
});

const columns = computed(() => {
	const { plan } = summaryData.value;
	// plan.children = [
	// 	plan,
	// 	...plan.children
	// ]
	
	const columns = [
		{
			title: "序号",
			dataIndex: "id",
			key: "id",
			width: 80,
			align: "center",
			fixed: "left"
		},
		{
			title: "物资名称",
			dataIndex: "name",
			width: 200,
			sorter: false,
			fixed: "left",
			key: "name",
			ellipsis: true
		},
		{
			title: "规格型号",
			dataIndex: "model",
			sorter: false,
			width: 200,
			key: "model",
			ellipsis: true,
			fixed: "left",
		},
	];
	if (planInfo.value.type === 3) {
		columns.push({
			title: "机械总数量",
			dataIndex: "total",
			width: 100,
			align: "center",
			fixed: "left",
		});
		columns.push({
			title: "租赁总时长",
			dataIndex: "use_time_total_unit",
			width: 100,
			align: "center",
			fixed: "left",
		});
		return columns;
	}
	columns.push({
		title: "计量单位",
		dataIndex: "unit",
		width: 100,
		key: "unit",
		align: "center",
		fixed: "left",
	});
	columns.push(
		{
			title: "合计",
			dataIndex: "total",
			width: 120,
			key: "heji",
			align: "center",
			fixed: "left",
		}
	);
	if (planInfo.value.type === 2) {
		columns.push({
			title: "使用时长",
			dataIndex: "use_time_total",
			sorter: false,
			width: 100,
			ellipsis: true
		},
		// {
		// 	title: "时长单位",
		// 	dataIndex: "time_unit",
		// 	width: 100,
		// 	align: "center"
		// }
		)
	}
	
	(plan.children || []).forEach((d, i) => {
		//d.opr_user.fullname
		//	console.log(d.opr_user);
		//info = "修改人:" + d.opr_user.fullname + " 修改时间:" + dayjs(d.update_time).format("YYYY-MM-DD");
			
		const { fullname = '' } = d?.opr_user || {};
		const info = `修改人：${fullname}，修改时间：${dayjs(d.update_time).format("YYYY-MM-DD")}`;
		columns.push({
			title: `更新计划${i + 1}`,
			dataIndex: `plan_${d.id}`,
			key: "qty",
			info,
			align: "center",
			customRender: ({ text, record, index, column }) => {
				return <span style={'color:#666'}>{parseInt(text) === parseFloat(text) ? parseInt(text) : text }</span>;
			},
			width: 120
		});
	});

	columns.push({});

	return columns;
});

const planInfo = computed(() => {
	return summaryData.value.plan || {};
});

const create_time = computed(() => {
	return dayjs(planInfo.value.create_time).format("YYYY-MM-DD HH:mm:ss"); 
});

const summarySource = computed(() => {
	return (summaryData.value.detail || []).map((d, i) => {
		d.id = i + 1;
		if (planInfo.value.type === 3) {
			d.use_time_total_unit = d.use_time_total + d.unit || '';
		}
		return d;
	});
});

onMounted(() => {
	const { id } = route.params;

	loading.value = true;
	post("plan/summary", { id }).then(data => {
		loading.value = false;
		summaryData.value = data;
	});
});

const title = computed(() => {
	return `${planInfo.value.project?.name || ''}总控计划汇总表`
})

const handleExport = () => {
	exportData(columns.value, summarySource.value, `${title.value}.xlsx`)
}

const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}

.plan-info {
	font-size: 14px;
	line-height: 40px;
	margin: 15px 0;
}
</style>
